margin是css很常使用的外間距，
也就是元素外圍和其他元素的距離。

可以想見有上下左右的間距，
margin-top:
margin-right:
margin-bottom:
margin-left:
而通常會使用比較簡便的
margin:上 右 下 左;
margin:上下 左右;
margin:上 左右 下;
margin:四個邊同樣値;
等常用的寫法。

而當數值是負數時，
就可以做出物件（上下左右）疊在其他物件上的效果。

margin:auto;
比較特別，
auto的意思在這裡是剩下的可用空間，
例如當直接寫
margin-left:auto;
可以得到靠右對齊（left把所有可用空間拿走了）。
而直接寫
margin: auto; 和 margin: 0 auto;
因為左右兩邊都auto，兩邊一起平分可用空間，
你就可以得到一個置中的物體。

常見的問題是，
為什麼在計算上下的剩餘空間時，
margin-top: auto; 和 margin-bottom: auto;
他的計算值為0。
所以不管你是寫
margin: auto; 和 margin: 0 auto;
效果都是一樣的。

大部分找到的文章都是寫到
margin-top: auto; 和 margin-bottom: auto;計算值為0
就停下來了，
目前還沒辦法完整解釋這個設定。

參考資料：
https://blog.csdn.net/dkmings/article/details/51661056
https://www.cnblogs.com/coco1s/p/10910588.html